<template>
  <div class="levle-3 jy-style-height" :id="'Level1outline' + props.info.id">
    <div class="Outline-box outlineClassName" :data-user-url="props.info.audio?props.info.audio.url:''"  :data-user-type="3" :data-user-id="props.info.id" :class="'Outline-box' + props.info.type" @contextmenu.stop="onContextMenu($event)">
      <Outline :info="props.info" :domShow="props.domShow" />
      <FlotMenu
        :selectInfo="props.info.type"
        v-if="!route.meta.loopType"
        :childId="props.level3Id"
        :indexs="-1"
        :contextmenuExhibitId="-1"
        :materialType="3"
        :AuxiliaryId="-1"
      />
    </div>
    <draggableList :childId="props.level3Id" :info="props.info" :domShow="props.domShow" />
    <Auxiliary
      :domShow="props.domShow"
      :level1Id="props.level3Id"
      :AuxiliaryId="index"
      :info="item"
      :indexs="index"
      v-for="(item, index) in props.info.auxiliaryList"
      :key="item.id"
    />
  </div>
</template>   
  
<script setup lang="ts">
import Auxiliary from '@/freeComponents/Auxiliary/index.vue';
import {
  isAnyElementOutOfParent,
  isElementOutOfParent,
  getParentLeftList,
  addParentWidths,
  getParentLeftItem,
} from '@/utils/minxin';
import { DraggableContainer } from 'vue3-draggable-resizable';
import { getDraggableNumber, getRemConversion } from '@/utils/getRemComputed';
import Level3outline from '../Level3outline/Level3outline.vue';
import draggableList from '../draggableComponents/draggableList.vue';
import { ref, nextTick, watch, computed } from 'vue';
import { useProjectStore } from '@/store';
import Outline from './Outline/Index.vue';
import { childItemMenuShow } from '@/hooks/menuHooks';
import { useRoute } from 'vue-router';
import FlotMenu from '@/components/flotMenu/OutlineMenu.vue';

const route = useRoute();
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
  indexs: {
    type: Number,
  },
  level1Id: {
    type: Number,
  },
  level2Id: {
    type: Number,
  },
  level3Id: {
    type: Number,
  },
  domShow: {
    type: Boolean,
  },
});

const onContextMenu = (e: any) => {
  e.preventDefault();
  if (route.meta.loopType) {
    return;
  }
  store.contextmenuchildId = props.level3Id;
  store.materialType = 3;
  store.contextmenuGroupId = -1;
  store.contextmenuExhibitId = -1;
  childItemMenuShow(e);
};
</script>  

<style scoped lang="less">
.levle-3 {
  display: flex;

  height: 100%;
  padding-right: 100px;
}
.levle-3-title {
  margin-right: 50px;

  img {
    width: auto;
  }
}
.Outline-box {
  position: relative;
  // margin-right: 280px;
}
.Outline-box:hover {
  :deep(.flot-menu) {
    display: flex;
    top: 150px;
    z-index: 999;
  }
}
.Outline-box13002 {
  :deep(.flot-menu) {
    top: 150px !important;
    left: 200px;
  }
}
.Outline-box13003 {
  :deep(.flot-menu) {
    top: 150px !important;
    left: 200px;
  }
}
.Outline-box13001 {
  :deep(.flot-menu) {
    top: 150px !important;
    left: 200px;
  }
}
.Outline-box23001 {
  :deep(.flot-menu) {
    left: 70% !important;
  }
}
.Outline-box33001 {
  :deep(.flot-menu) {
    left: 250px !important;
  }
}
.Outline-box33002 {
  :deep(.flot-menu) {
    left: 260px !important;
  }
}
.Outline-box33003 {
  :deep(.flot-menu) {
    left: 260px !important;
  }
}
.Outline-box53001,
.Outline-box53002,
.Outline-box53003,
.Outline-box53004,
.Outline-box53005,
.Outline-box53006 {
  :deep(.flot-menu) {
    left: 242px !important;
  }
}
.Outline-box53004 {
  :deep(.flot-menu) {
    left: 268px !important;
  }
}
.Outline-box53005 {
  :deep(.flot-menu) {
    left: 268px !important;
  }
}
.Outline-box53006 {
  :deep(.flot-menu) {
    left: 368px !important;
  }
}
.Outline-box73001 {
  :deep(.flot-menu) {
    left: 312px !important;
  }
}
.Outline-box73002 {
  :deep(.flot-menu) {
    left: 292px !important;
  }
}
.Outline-box73003 {
  :deep(.flot-menu) {
    left: 296px !important;
  }
}
.Outline-box153001 {
  :deep(.flot-menu) {
    top: 145px !important;
    left: 280px;
  }
}
.Outline-box153002 {
  :deep(.flot-menu) {
    top: 145px !important;
    left: 280px;
  }
}
.Outline-box153003 {
  :deep(.flot-menu) {
    top: 145px !important;
    left: 280px;
  }
}
</style>